import React, { FC,useEffect } from 'react'
import { Form,Input } from 'antd'
import useGetPageInfo from '../../../hooks/useGetPageInfo.ts'
import { useDispatch } from 'react-redux'
import { resetPageInfo } from '../../../store/pageInfoReducer.ts'
const { TextArea } = Input
// import 
const PageSetting: FC = ()=>{
    const pageInfo = useGetPageInfo()
    // const { title,desc,js,css } = pageInfo
    const [form] = Form.useForm()
    const dispatch = useDispatch()
    // 实时更新
    useEffect(()=>{
        form.setFieldsValue(pageInfo)
    },[pageInfo])

    const handleValuesChange = ()=>{
        console.log('newValues',form.getFieldsValue());
        dispatch(resetPageInfo(form.getFieldsValue()))
    }

    return <Form 
            layout='vertical' 
            initialValues={pageInfo} 
            onValuesChange={handleValuesChange}
            form={form}
            >
            <Form.Item label="问卷标题" name="title" rules={[{required: true, message:'请输入'}]}>
                <Input placeholder="请输入标题" />
            </Form.Item>
            <Form.Item label="问卷描述" name="desc">
                <TextArea placeholder="请输入描述" />
            </Form.Item>
            <Form.Item label="样式代码" name="css">
                <TextArea placeholder="请输入css样式代码" />
            </Form.Item>
            <Form.Item label="样式代码" name="js">
                <TextArea placeholder="请输入JS脚本代码" />
            </Form.Item>
    </Form>
}

export default PageSetting